<template>
    <div>
      <el-card class="box-card">
        <el-form :inline="true" :model="formInline" class="add-type-form-inline">
          <el-form-item label="任务类型">
            <el-input v-model="formInline.typeName" placeholder="请输入大类名称" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addType">增加大类</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <div class="type-tree-box">
        <el-table
          :data="dataList"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column label="序号" type="index" width="auto">
          </el-table-column>

          <el-table-column prop="name" label="名称"  width="auto"/>
          <el-table-column label="显示"  width="auto">
            <template slot-scope="scope" v-if="!scope.row.parentId">
              <el-switch v-model="scope.row.visible"
                         active-color="#13ce66"
                         inactive-color="#ff4949"
                         @change="postVisible(scope.row.id, scope.row.visible)"/>
            </template>
          </el-table-column>
          <el-table-column label="锁定"  width="auto">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.enable" v-if="scope.row.parentId"
                         active-color="#13ce66"
                         inactive-color="#ff4949"
                         @change="postEnable(scope.row.id, scope.row.enable)"/>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="auto">
            <template slot-scope="scope">
              <el-button size="mini" v-if="!scope.row.parentId" @click="addChildType(scope.row.id)">新增小类
              </el-button>
              <el-button size="mini" v-if="!scope.row.parentId" @click="release(scope.row.name)">释放
              </el-button>
              <el-button size="mini" type="danger" @click="deleteType( scope.row.name)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div>
        <el-dialog title="新增小类" :visible.sync="dialogUploadVisible" class="upload-child-type-box" >
          <el-form ref="form" :model="uploadParams" label-width="auto">
            <el-form-item label="活动名称">
              <el-input v-model="uploadParams.name" placeholder="请输入内容" clearable></el-input>
            </el-form-item>
          </el-form>
          <el-upload
            class="upload-demo"
            action
            :auto-upload="false"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :on-change="handleChange"
            :file-list="fileList">
            <el-button size="small" type="primary" >选取文件</el-button>
          </el-upload>

          <div slot="footer" class="broker-dialog-footer">
            <el-button @click="dialogUploadVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateAction">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
</template>

<script>

    export default {
        name: 'TaskManagement',
        components: {},
        props: {},
        data(){
            return {
              formInline: {
                typeName: '',
              },
              dataList: [],
              fileList: [],
              file: null,
              dialogUploadVisible: false,
              uploadParams: {
                url: `${this.$http.defaults.baseURL}v1/tasks/upload`,
                name: '',
                parentId: 0
              },


            };
        },
        computed: {},
        watch: {},
        methods: {
          handleChange(file, fileList) {
            console.log(file, fileList)
            this.fileList = fileList;
            this.file = file.raw;
          },
          handleRemove(file, fileList) {
            console.log(file, fileList);
          },
          handlePreview(file) {
            console.log(file);
          },
          handleExceed(files, fileList) {
            this.$message.warning(`当前限制只能选择 1 个文件`);
          },
          beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
          },
          addChildType(id){
            this.uploadParams.parentId = id
            this.dialogUploadVisible = true
          },
          updateAction(){
            let formData = new FormData();
            formData.append('file', this.file);
            formData.append('typeName', this.uploadParams.name);
            formData.append('parentId', this.uploadParams.parentId);   // 上传文件的同时， 也可以上传其他数据
            this.$http.post('v1/tasks/upload', formData, {headers:{'upload':true}})
            .then(res =>{
              if (res.status === 200){
                this.$message({ type: 'success',  message: '添加成功!' });
                this.dialogUploadVisible = false
                this.file = null
                this.getTypeList();
              }
            })
            .catch(err=>{
              let {response} = err
              if (response){
                this.$message.error(response.data.message);
                return false;
              }else {
                console.log(err)
              }
            })

          },
          release(typeName){
            let params = {typeName}
            this.$http.post('/v1/tasks/release', params)
            .then(res =>{
              if (res.status === 200){
                this.$message({ type: 'success',  message: '操作成功!' });
              }
            })
            .catch(err=>{
              let {response} = err
              if (response){
                this.$message.error(response.data.message);
                return false;
              }else {
                console.log(err)
              }
            })
          },
          deleteType(typeName){
            this.$confirm('是否删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let params = {type: typeName}
              this.$http.delete('/v1/tasks', {params})
                .then(res =>{
                  if (res.status === 200){
                    this.$message({ type: 'success',  message: '删除成功!' });
                    this.getTypeList();
                  }
                })
                .catch(err=>{
                  let {response} = err
                  if (response){
                    this.$message.error(response.data.message);
                    return false;
                  }else {
                    console.log(err)
                  }
                })
            }).catch(() => {
              this.$message({ type: 'info', message: '已取消删除' });
            });

          },
          addType(){
            if (this.formInline.typeName === ''){
              this.$message.warning('请在按钮左侧输入大类型名称');
            }else {
              this.open(this.formInline.typeName);
            }
          },
          open(typeName) {
            this.$confirm(`确认新建大类型【${typeName}】吗？`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let params = {taskType: typeName}
              this.$http.post('/v1/dictionaries/task_type', params)
              .then(res =>{
                this.$message({ type: 'success',  message: '添加成功!' });
                this.getTypeList();
              })
              .catch(err=>{
                let {response} = err
                if (response){
                  this.$message.error(response.data.message);
                  return false;
                }else {
                  console.log(err)
                }
              })
            }).catch(() => {
              this.$message({ type: 'info', message: '已取消添加' });
            });
          },
          postVisible(id, visible){
            let params = {id, visible}
            this.$http.post('/v1/dictionaries/visible', params)
            .then(res =>{
              console.log(res)
              this.getTypeList()
            })
            .catch(err=>{
              let {response} = err
              if (response){
                this.$message.error(response.data.message);
                return false;
              }else {
                console.log(err)
              }
            })
          },
          postEnable(id, enable){
            let params = {id, enable}
            this.$http.post('/v1/dictionaries/enable', params)
            .then(res =>{
              console.log(res)
              this.getTypeList()
            })
            .catch(err=>{
              let {response} = err
              if (response){
                this.$message.error(response.data.message);
                return false;
              }else {
                console.log(err)
              }
            })
          },
          getTypeList(){
            let params = {type: 'TASK_TYPE'}
            this.$http.get('/v1/dictionaries', {params})
            .then(res =>{
              console.log(res)
              this.dataList = [...res.data]
            })
            .catch(err=>{
              let {response} = err
              if (response){
                this.$message.error(response.data.message);
                return false;
              }else {
                console.log(err)
              }
            })
          },
        },
        created() {
          this.getTypeList();
        },
    }

</script>

<style lang="scss" scoped>
/*@import url(); 引入公共的css类*/
  .add-type-form-inline{
    text-align: left;
  }

  .upload-child-type-btn{
    float: right;
    padding: 3px 0;
  }
</style>
